<template>
    <div class="mobile">
        <div class="container">
            <h2>手机</h2>
            <div class="wrapper">
                <div class="banner-left">
                    <a href="/product/35"><img v-lazy="require('assets/images/mix-alpha.jpg')" alt=""></a>
                </div>
                <div class="list-box">
                    <div class="list" v-for="(item,i) in phoneList" :key="i">
                        <div class="item" v-for="(sub,j) in item" :key="j">
                            <span :class="{'new-pro': j % 2 == 0}">新品</span>
                            <div class="item-img">
                                <img v-lazy="sub.mainImage" alt="">
                            </div>
                            <div class="item-info">
                                <h3>{{sub.name}}</h3>
                                <p>{{sub.subtitle}}</p>
                                <p class="price" @click="addCart(sub.id)">{{sub.price}}元</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getProductList} from "network";

    export default {
        name: "Mobile",
        data() {
            return {
                phoneList: [],
            }
        },
        methods: {
            addCart(id) {
                // console.log(id);
                this.$bus.$emit('addCart', id)
            },
            getIndexProductList() {
                getProductList(100012, 14).then(res => {
                    res.list = res.list.slice(6,14);
                    this.phoneList = [res.list.slice(0, 4), res.list.slice(4, 8)]
                })
            }
        },
        created() {
            this.getIndexProductList();
        }
    }
</script>

<style scoped lang="scss">
    @import 'assets/scss/config.scss';
    @import 'assets/scss/mixin.scss';

    .mobile {
        background-color: #F5F5F5;
        padding: 30px 0 50px;

        h2 {
            font-size: $fontF;
            height: 21px;
            line-height: 21px;
            color: $colorB;
            margin-bottom: 20px;
        }

        .wrapper {
            display: flex;

            .banner-left {
                margin-right: 16px;

                img {
                    width: 224px;
                    height: 619px;
                }
            }

            .list-box {
                .list {
                    @include flex();
                    width: 986px;
                    margin-bottom: 14px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .item {
                        width: 236px;
                        height: 302px;
                        background-color: #fff;
                        text-align: center;

                        span {
                            display: inline-block;
                            width: 67px;
                            height: 24px;
                            font-size: 14px;
                            line-height: 24px;
                            color: #fff;

                            &.new-pro {
                                background-color: #7ecf68;
                            }

                            &.kill-pro {
                                background-color: #e82626;
                            }
                        }

                        .item-img {
                            img {
                                width: 100%;
                                height: 195px;
                            }
                        }

                        .item-info {
                            h3 {
                                font-size: 14px;
                                color: $colorB;
                                line-height: 14px;
                                font-weight: bold;
                            }

                            p {
                                color: $colorD;
                                line-height: 13px;
                                margin: 6px auto 13px;
                            }

                            .price {
                                color: #ff2200;
                                font-size: $fontJ;
                                font-weight: bold;
                                cursor: pointer;

                                &:after {
                                    content: '';
                                    @include bgImg(22px, 22px, "~assets/images/icon-cart-hover.png");
                                    margin-left: 5px;
                                    vertical-align: middle;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
